<template>
    <div class="box">
        <div class="operation">
            <Dropdown style="margin-left: 15px"  trigger="click" @on-click="typeSelectChange">
                <span>
                    绘制
                    <Icon type="ios-arrow-down"></Icon>
                </span>
                <DropdownMenu slot="list">
                    <DropdownItem name="Point">点</DropdownItem>
                    <DropdownItem name="LineString">线</DropdownItem>
                    <DropdownItem name="Box">矩形</DropdownItem>
                    <DropdownItem name="Polygon">多边形</DropdownItem>
                    <DropdownItem name="Circle">圆</DropdownItem>
                    <DropdownItem name="clear">清除</DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
        <div class="info" ref="infoEl">

        </div>
        <div id="map"></div>
    </div>
</template>

<script>
/* eslint-disable */
import {Map, View} from 'ol';
import Tile from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import TileGrid from 'ol/tilegrid/TileGrid';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import {Icon, Style,Stroke,Fill,Circle} from 'ol/style';
import Draw from "ol/interaction/Draw";
import {createBox} from "ol/interaction/Draw";
import {fromLonLat} from 'ol/proj';
import layerTile from "ol/layer/Tile";
import {OSM} from "ol/source";


export default {
	name: "home",
	components:{

	},
	data(){
		return {

        }
	},
	mounted(){
        let center = [108.946994, 34.261361];

        // arcgiS图层
        let arcgisLayer = new Tile({
            source: new XYZ({
                url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            }),
        });
        // 矢量图层
        this.vectorLayer = new VectorLayer({
            source: new VectorSource(),
            style: new Style({
                
                stroke: new Stroke({
                    width: 2,
                    color: [242,114,60, 1],
                    lineDash:[1,2,3,4,5,6],
                }),
                fill: new Fill({
                    color: [242,114,60, 0.2],
                }),
                image: new Circle({
                    // 点的颜色
                    fill: new Fill({
                        color: [242,114,60, .5]
                    }),
                    stroke: new Stroke({
                        color: [242,114,60, 1]
                    }),
                    // 圆形半径
                    radius: 5
                }),
                
            })
        })
    this.map = new Map({
      target: "map",
      layers: [
        new layerTile({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [113.0567, 23.67537],
        maxZoom: 18,
        minZoom: 8,
        zoom: 13,
        projection: "EPSG:4326"
      })
    });
    },
	methods:{
        typeSelectChange(value) {
            this.map.removeInteraction(this.draw);
            if (value === 'clear') {
                this.vectorLayer.getSource().clear();
                this.$refs.infoEl.innerHTML = "";
            }else{
                if(value === "Box"){
                    this.draw = new Draw({
                        source: this.vectorLayer.getSource(),
                        geometryFunction: createBox(),
                        type: "LineString",
                        stopClick: true,  //绘制时禁用点击事件
                        style:this.getDrawingStyle(),
                    })
                }else{
                    this.draw = new Draw({
                        source: this.vectorLayer.getSource(),
                        type: value,
                        stopClick: true,  //绘制时禁用点击事件
                        style:this.getDrawingStyle(),
                    })
                }
                
                this.draw.on("drawend",(e)=>{
                    console.log(window.e=e,window.d=this.draw);
                    if(this.draw.type_ === "Circle"){
                        let circleCenter = e.feature.getGeometry().getCenter();
                        let circleRadius = e.feature.getGeometry().getRadius();
                        circleRadius = fromLonLat([circleRadius,circleRadius],"EPSG:3857")[0];
                        this.$refs.infoEl.innerHTML = "圆心：" + circleCenter+"<br/>半径："+circleRadius;
                    }else{
                        let coordinates = e.feature.getGeometry().getCoordinates();
                        this.$refs.infoEl.innerHTML = "坐标："+coordinates;
                    }
                    this.map.removeInteraction(this.draw);
                });
                this.map.addInteraction(this.draw);
            }
        },
        getDrawingStyle(){
            return new Style({
                stroke: new Stroke({
                    width: 2,
                    color: [239,176,19, 1],
                    lineDash:[1,2,3,4,5,6],
                }),
                fill: new Fill({
                    color: [239,176,19, 0.2],
                }),
                image: new Circle({
                    // 点的颜色
                    fill: new Fill({
                        color: [239,176,19, .5]
                    }),
                    stroke: new Stroke({
                        color: [239,176,19, 1]
                    }),
                    // 圆形半径
                    radius: 5
                }),
            })
        },
	},
};
</script>

<style scoped lang="less">
.box {
    width: 100%;
	height: 100%;
    position: relative;
    .operation{
		position: absolute;
		z-index: 1;
		top: 10px;
		left: 10px;
		display: flex;
		background: #fff;
		color: #000;
		border-radius: 2px;
		box-shadow: 1px 2px 1px rgba(0,0,0,.15);
		padding:5px 15px 5px 10px;
    }
    .info{
        position: absolute;
        z-index: 1;
        top: 10px;
        right: 10px;
        background: #fff;
        color: #000;
        max-width: 200px;
        word-break: break-all;
    }
	#map{
		width:100%;
		height: 100%;
		/deep/ .ol-control{
			display:none;
		}
	}
}
